<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据分析</title>
    <link rel="stylesheet" href="css/数据分析.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
    <div class="root">
        <div class="title">
            <div class="item"><a href="#">课程</a></div>
            <div class="item"><a href="#">课程</a></div>
            <div class="item"><a href="#">课程</a></div>
            <div class="item"><a href="#">课程</a></div>
            <div class="item"><a href="#">课程</a></div>
            <div class="item"><a href="#">课程</a></div>
            <div class="item"><a href="#">课程</a></div>
        </div>
        <div class="course">
            <div class="item1">
                <div id="item1" style="height: 100%;width: 99%;"></div>
                <script type="text/javascript">
                    var dom = document.getElementById("item1");
                    var myChart0 = echarts.init(dom);
                    var app = {};

                    var option0;



                    option0 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // Use axis to trigger tooltip
                                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                            }
                        },
                        legend: {
                            data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value'
                        },
                        yAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        series: [
                            {
                                name: 'Direct',
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [32, 30, 30, 33, 39, 33, 32]
                            },
                            {
                                name: 'Mail Ad',
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [12, 13, 10, 13, 9, 23, 21]
                            },
                            {
                                name: 'Affiliate Ad',
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [22, 18, 19, 23, 29, 33, 31]
                            },
                            {
                                name: 'Video Ad',
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [15, 21, 20, 15, 19, 33, 41]
                            },
                            {
                                name: 'Search Engine',
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [82, 83, 90, 93, 129, 133, 132]
                            }
                        ]
                    };

                    if (option0 && typeof option0 === 'object') {
                        myChart0.setOption(option0);
                    }

                </script>
            </div>
            <div class="item2"></div>
            <div class="item3">
                <div id="item3" style="height: 95%;margin-top: 20px"></div>
                <script type="text/javascript">
                    var dom = document.getElementById("item3");
                    var myChart = echarts.init(dom);
                    var app = {};

                    var option;

                    setTimeout(function () {

                        option = {
                            legend: {},
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                },
                                showContent: false
                            },
                            dataset: {
                                source: [
                                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                                    ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                                    ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                                    ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                                    ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                                ]
                            },
                            xAxis: {
                                type: 'category'
                            },
                            yAxis: {
                                type: 'value',
                                boundaryGap: [0, 0.01]
                            },
                            grid: {
                                top: '55%',
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            series: [
                                {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                {type: 'bar', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                {
                                    type: 'pie',
                                    id: 'pie',
                                    radius: '30%',
                                    center: ['50%', '25%'],
                                    emphasis: {focus: 'data'},
                                    label: {
                                        formatter: '{b}: {@2012} ({d}%)'
                                    },
                                    encode: {
                                        itemName: 'product',
                                        value: '2012',
                                        tooltip: '2012'
                                    }
                                }
                            ]
                        };

                        myChart.on('updateAxisPointer', function (event) {
                            var xAxisInfo = event.axesInfo[0];
                            if (xAxisInfo) {
                                var dimension = xAxisInfo.value + 1;
                                myChart.setOption({
                                    series: {
                                        id: 'pie',
                                        label: {
                                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                        },
                                        encode: {
                                            value: dimension,
                                            tooltip: dimension
                                        }
                                    }
                                });
                            }
                        });

                        myChart.setOption(option);

                    });

                    if (option && typeof option === 'object') {
                        myChart.setOption(option);
                    }

                </script>
            </div>
        </div>
        <div class="zhe">
            <div id="zhe" style="height: 100%;width: 99%;"></div>

            <script type="text/javascript">
                var dom = document.getElementById("zhe");
                var myChart1 = echarts.init(dom);
                var app = {};

                var option;



                option = {
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'line',
                            stack: '总量',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '直接访问',
                            type: 'line',
                            stack: '总量',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '搜索引擎',
                            type: 'line',
                            stack: '总量',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };

                if (option && typeof option === 'object') {
                    myChart1.setOption(option);
                }

            </script>
        </div>
    </div>

</body>
</html>